<!DOCTYPE html>
<html>
  <head>
    <meta
      name="viewport"
      id="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
    />
    <meta charset="utf-8" />
    <script src="../../lib/phaser.min.js"></script>
    <script src="../../lib/TweenLite.min.js"></script>
    <script src="//localhost:3001/build/proton.js"></script>
  </head>
  <body>
    <script>
      var proton, emitter, logo;

      var config = {
        type: Phaser.AUTO,
        width: 960,
        height: 700,
        physics: {
          default: "arcade",
          arcade: {
            gravity: { y: 200 }
          }
        },
        scene: {
          preload: preload,
          create: create,
          update: update
        }
      };

      var game = new Phaser.Game(config);

      function preload() {
        this.load.image("sky", "imgs/bg.jpg");
        this.load.image("dot", "imgs/dot.png");
        this.load.image("logo", "imgs/logo.png");
      }

      function create() {
        this.add.image(960 / 2, 700 / 2, "sky");
        logo = this.physics.add.image(400, 100, "logo");
        logo.setVelocity(100, 200);
        logo.setBounce(1, 1);
        logo.setCollideWorldBounds(true);

        createProton(this);
      }

      function update() {
        proton.update();
        proton.stats.update();
        emitter.p.x = logo.x;
        emitter.p.y = logo.y;
      }

      function createProton(target) {
        proton = new Proton();
        emitter = new Proton.Emitter();
        emitter.rate = new Proton.Rate(
          new Proton.Span(4, 7),
          new Proton.Span(0.05, 0.09)
        );

        emitter.addInitialize(new Proton.Mass(1));
        emitter.addInitialize(new Proton.Radius(20, 200));
        emitter.addInitialize(new Proton.Life(2, 4));
        emitter.addInitialize(
          new Proton.Velocity(
            new Proton.Span(0.5, 1),
            new Proton.Span(-50, 50),
            "polar"
          )
        );

        emitter.addBehaviour(
          new Proton.Alpha(0, 1, Infinity, Proton.easeOutCubic)
        );
        emitter.addBehaviour(
          new Proton.Scale(1, 0, Infinity, Proton.easeOutCubic)
        );
        crossZoneBehaviour = new Proton.CrossZone(
          new Proton.RectZone(0, 0, 960, 700),
          "dead"
        );
        emitter.addBehaviour(new Proton.RandomDrift(5, 5, 0.05));

        emitter.emit();
        proton.addEmitter(emitter);
        proton.addRenderer(createRender(target));
      }

      function createRender(target) {
        var renderer = new Proton.CustomRenderer();
        renderer.onProtonUpdate = function() {};

        renderer.onParticleCreated = function(particle) {
          var dot = target.add.image(particle.p.x, particle.p.y, "dot");
          particle.body = dot;
          dot.setBlendMode(Phaser.BlendModes.ADD);
        };

        renderer.onParticleUpdate = function(particle) {
          particle.body.x = particle.p.x;
          particle.body.y = particle.p.y;
          particle.body.setScale(particle.scale);
        };

        renderer.onParticleDead = function(particle) {
          target.children.remove(particle.body);
          renderer.pool.expire(particle.body);
          particle.body = null;
        };

        return renderer;
      }
    </script>
  </body>
</html>
